<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<body>
    <!-- 头部 -->
    <header class="header" id="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
              <!-- logo -->
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="logo navbar-brand wow fadeInLeft"  href="javascript:void(0)">Spirit8</a>
              </div>
          
              <!-- 导航元素 -->
              <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#banner" class="wow fadeInRight" data-wow-delay="100ms">HOME</a>
                    </li>
                    <li>
                        <a href="#about" class="wow fadeInRight" data-wow-delay="200ms">About</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" class="wow fadeInRight" data-wow-delay="300ms">SERVICES</a>
                    </li>
                    <li>
                        <a href="#work" class="wow fadeInRight" data-wow-delay="400ms">Work</a>
                    </li>
                    <li>
                        <a href="#test" class="wow fadeInRight" data-wow-delay="500ms">testimonials</a>
                    </li>
                    <li>
                        <a href="#contact" class="wow fadeInRight" data-wow-delay="600ms">CONTACT</a>
                    </li>
                </ul>
              </div>
            </div>
        </nav>
    </header>

    <!-- banner -->
    <div class="banner" id="banner">
        <video autoplay id="background" muted loop>
        <!-- <video id="background" muted> -->
            <source src="./assets/images/banner.mp4" />
        </video>

        <div class="box">
            <h3 class="title wow lightSpeedIn" data-wow-delay=".3s">
                wELCOME on 
                <span>spirit8</span>
            </h3>

            <p class="info wow fadeInUp" data-wow-delay=".5s">
                We are a digital agency with 
                <span>years of experience</span> and with 
                <span>extraordinary people</span>
            </p>

            <div class="more wow fadeInUp" data-wow-delay=".7s">
                <a href="#footer">↓</a>
            </div>
        </div>

    </div>

    <!-- About -->
    <div class="about" id="about">
        <div class="container">
            <div class="left wow fadeInUp" data-wow-delay="400ms">
                <img src="./assets/images/about-background.png" />
            </div>

            <div class="right">
                <div class="title wow fadeInUp">
                    <span class="small">About us</span>
                    <h3 class="big">
                        <span>Some</span>
                        words 
                        <span>about us</span>
                    </h3>
                </div>

                <p class="info wow fadeInUp">
                    We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
                </p>

                <ul class="list">
                    <li class="wow fadeInUp" data-wow-delay="200ms">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="300ms">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="400ms">
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>
                </ul>

                <div class="more wow fadeInUp" data-wow-delay="500ms">
                    <div class="icon">
                        <img src="./assets/images/about-btn.png">
                    </div>
                    <span class="name">Browse our work</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Team -->
    <div class="team">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="500ms">
                <h3 class="title">
                    Meet 
                    <span>our team</span>
                </h3>
            </div>

            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="500ms">
                    <div class="thumb">
                        <img src="./assets/images/cover.png" />
                    </div>

                    <div class="content">
                        <h5 class="name">Jason Statham</h5>
                        <span class="job">Knife designer</span>
                        <p class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </p>
                    </div>
                </div>

                <div class="item wow fadeInUp" data-wow-delay="700ms">
                    <div class="thumb">
                        <img src="./assets/images/cover.png" />
                    </div>

                    <div class="content">
                        <h5 class="name">Jason Statham</h5>
                        <span class="job">Knife designer</span>
                        <p class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </p>
                    </div>
                </div>

                <div class="item wow fadeInUp" data-wow-delay="800ms">
                    <div class="thumb">
                        <img src="./assets/images/cover.png" />
                    </div>

                    <div class="content">
                        <h5 class="name">Jason Statham</h5>
                        <span class="job">Knife designer</span>
                        <p class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </p>
                    </div>
                </div>

                <div class="item wow fadeInUp" data-wow-delay="900ms">
                    <div class="thumb">
                        <img src="./assets/images/cover.png" />
                    </div>

                    <div class="content">
                        <h5 class="name">Jason Statham</h5>
                        <span class="job">Knife designer</span>
                        <p class="info">
                            Do not seek to change what has come before. Seek to create that which has not.
                        </p>
                    </div>
                </div>
            </div>

            <div class="more wow fadeInUp" data-wow-delay="500ms">
                <label for=""></label>
                <label for=""></label>
                <label for=""></label>
            </div>
        </div>
    </div>

    <!-- services -->
    <div class="services"></div>

    <!-- clients -->
    <div class="clients"></div>

    <!-- work -->
    <div class="work" id="work">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="200ms">
                <h3 class="title">
                    take a look at  
                    <span>our work</span>
                </h3>
            </div>

            <p class="info wow fadeInUp" data-wow-delay="200ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
            </p>

            <div class="typelist">
                <div class="top">
                    <div class="left wow fadeInUp" data-wow-delay="400ms">
                        <h4 class="title">Filter by type</h4>
                    </div>

                    <div class="right wow fadeInUp" data-wow-delay="400ms">
                        <a href="javascript:void(0)">All</a>
                        <a href="javascript:void(0)">Web design</a>
                        <a href="javascript:void(0)">Mobile design</a>
                        <a href="javascript:void(0)">Photograpy</a>
                    </div>
                </div>

                <div class="list">
                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="400ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="500ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="600ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="700ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="800ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="900ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1000ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1100ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1200ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1300ms">
                        <img src="./assets/images/work-img.png" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- test -->
    <div class="test" id="test">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="500ms">
                <h3 class="title">
                    our clients’ 
                    <span>testimonials</span>
                </h3>
            </div>

            <div class="infolist wow fadeInUp" data-wow-delay="300ms">
                <input type="radio" name="info" id="info1" checked />
                <div class="info">
                    <p class="content">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </p>
    
                    <div class="name">
                        <span>Dean Martin, </span>CEO Acme Inc.
                    </div>
                </div>
                
                <input type="radio" name="info" id="info2" />
                <div class="info">
                    <p class="content">
                        作者介绍更换内容11111
                    </p>
    
                    <div class="name">
                        <span>Dean Martin, </span>CEO Acme Inc.
                    </div>
                </div>
                
                <input type="radio" name="info" id="info3" />
                <div class="info">
                    <p class="content">
                        第三个更换内容
                    </p>
    
                    <div class="name">
                        <span>Dean Martin, </span>CEO Acme Inc.
                    </div>
                </div>

                <div class="morebox">
                    <div class="more wow fadeInUp" data-wow-delay="500ms">
                        <label for="info1"></label>
                        <label for="info2"></label>
                        <label for="info3"></label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- contact -->
    <div class="contact" id="contact">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="500ms">
                <h3 class="title">
                    feel free to 
                    <span>contact us</span>
                </h3>
            </div>

            <p class="info wow fadeInUp" data-wow-delay="600ms">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. 
            </p>

            <div class="register">
                <form name="register" method="post">
                    <div class="one">
                        <div class="left wow fadeInUp" data-wow-delay="400ms">
                            <div class="title">
                                Name<sup>*</sup>
                            </div>
                            <div class="input">
                                <input type="text" name="username" placeholder="请输入用户名称" required />
                            </div>
                        </div>
                        <div class="right wow fadeInUp" data-wow-delay="500ms">
                            <div class="title">
                                Email Address<sup>*</sup>
                            </div>
                            <div class="input">
                                <input type="email" name="email" placeholder="请输入邮箱" required />
                            </div>
                        </div>
                    </div>

                    <div class="two">
                        <div class="title wow fadeInUp" data-wow-delay="600ms">
                            Message<sup>*</sup>
                        </div>
                        <div class="input wow fadeInUp" data-wow-delay="700ms">
                            <textarea name="message" placeholder="请输入内容" required></textarea>
                        </div>
                    </div>

                    <div class="three wow fadeInUp"  data-wow-delay="900ms">
                        <button class="send">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer class="footer" id="footer">
        <div class="container">
            <div class="box">
                <div class="copyright wow fadeInUp" data-wow-delay="300ms">
                    ALL RIGHTS RESERVED. COPYRIGHT © 
                    <span>2014 SPIRIT8</span>
                </div>
                <div class="linklist">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div id="back">
		<a href="#banner" id="gotop">
			<img src="./assets/images/top.svg" />
        </a>
	</div>




</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //获取id为background的元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 10

    //实例化wow.js
    new WOW().init()


    // 滚动监听
    // a href == id 
    //锚点跳转滑动效果  
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function() {  
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {  
            var $target = $(this.hash);  
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  
            if ($target.length) {  
                var targetOffset = $target.offset().top;  
                $('html,body').animate({  
                            scrollTop: targetOffset  
                },1000);  
                return false;  
            }  
        }  
    });  

    //给页面绑定一个滚动条事件
    $(document).scroll(function(){
        //获取滚动条滚动长度大小
        var distance = $(this).scrollTop()

        //当滚动条滚动的长度大于10
        if(distance > 10)
        {
            //显示返回顶部
            $("#gotop").css({zIndex:99998,opacity:1});
            $("#header").css({backgroundColor:'#111111',paddingBottom:0});
        }else
        {
            //隐藏返回顶部
            $("#gotop").css({zIndex:-99998,opacity:0});
            $("#header").css({backgroundColor:'transparent',paddingBottom:'1em'});
        }
    })
</script>